<!-- 配料投料-投料 -->


<template>
    <view class="container">
        <!-- 顶部标题 -->
        <TopBar title="配料投料-投料"></TopBar>

        <scroll-view scroll-top="0" scroll-y="true" class="scroll-Y"
            style="height: 400px; background-color: antiquewhite;padding: 10px 20px;width: 90%;">
            <view class="scroll-Y-content">
                <view class="scroll-Y-content-title-leftbox">
                    <view>工艺</view>
                    <view>工艺</view>
                </view>
                <view class="scroll-Y-content-title-rightbox">
                    <view>类型</view>
                    <view>投料KG</view>
                </view>
            </view>
            <view class="scroll-Y-content">
                <view class="scroll-Y-content-title-leftbox">
                    <view>参数范围</view>

                </view>
                <view class="scroll-Y-content-title-rightbox">
                    <view>170-200</view>
                </view>
            </view>
            <view class="scroll-Y-content">
                <view class="scroll-Y-content-title-rightbox">
                    <view>170-200</view>
                </view>
            </view>
            <view class="scroll-Y-content">
                <view class="scroll-Y-content-title-leftbox ">
                    <view class="leftbox">
                        <view>参数范围</view>
                        <view>参数范围</view>
                    </view>
                </view>
                <view class="scroll-Y-content-title-rightbox ">
                    <view class="rightbox">
                        <view>参数范围</view>
                        <view>参数范围</view>
                    </view>
                </view>
            </view>
            <view class="scroll-Y-content">
                <view class="scroll-Y-content-title-leftbox">
                    <view>已称</view>
                    <view>0</view>
                </view>
                <view class="scroll-Y-content-title-rightbox">
                    <view>已投</view>
                    <view>0</view>
                </view>
            </view>
            <!-- 接下来是标题+输入框共三个 -->
            <view class="top-input-date">
                <view class="top-input-date-title">授权码</view>
                <view top-input-date-inputbox>
                    <input class="top-input-date-input" placeholder="" />
                </view>
            </view>
             <view class="top-input-date">
                <view class="top-input-date-title">原配料条码</view>
                <view top-input-date-inputbox>
                    <input class="top-input-date-input" placeholder="" />
                </view>
            </view>
             <view class="top-input-date">
                <view class="top-input-date-title">重量</view>
                <view top-input-date-inputbox>
                    <input class="top-input-date-input" placeholder="" />
                </view>
            </view>
        </scroll-view>
        <view class="bottom-buttom">
            <button>确定</button>
            <button @click="">明细</button>
            <button>刷新</button>
        </view>
    </view>
</template>
<script setup lang="ts">
// 这里可以编写组件的逻辑代码
import { ref } from 'vue'

// 示例响应式数据
const message = ref('配料投料-详情')
</script>
<style scoped>
/* 这里可以编写组件的样式 */
.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    /* justify-content: center; */
    min-height: 500px;
    overflow: hidden;
    /* 3. 隐藏容器溢出内容 */
    background-color: #F7F3F1;
    /* background-image: url("/src/static/log/Loginbg3.png"); */
    background-size: 100% 100%;
}

/* 滑动区域内-行的样式 */
.scroll-Y-content {
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #aeaba9;

}

/* 滑动区域内-行的样式-左边view*/
.scroll-Y-content-title-leftbox {
    width: 100%;
    display: flex;
    justify-content: center;
}

.leftbox {
    display: flex;
    flex-direction: column;

}

/* 滑动区域内-行的样式-右边view*/
.scroll-Y-content-title-rightbox {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.rightbox {
    flex-direction: column;

}

/* 底部三个按钮 */
.bottom-buttom {
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    /* // 使底部按钮在水平方向上均匀分布，按钮之间的间距相等 */
    justify-content: space-between;
}

/* 三个输入跨 */
.top-input-date {
    display: flex;
    /* // 设置子元素水平排列 */
    flex-direction: row;


    /* // 设置子元素在交叉轴上居中对齐 */
    align-items: center;

    margin: 10px 0px;
}

.top-input-date-title {
    width: 100px;
    /* 固定标题宽度，就像书架的隔板宽度统一 */
    text-align: left;
    /* 文字右对齐，视觉上更整齐 */
    padding-right: 10px;
    /* 标题和输入框之间留间隙 */
}

.top-input-date-input {
    width: 90%;
    height: 35px;
    border: 1px solid #000;
    border-radius: 20px;
    padding-left: 20px;
    margin-right: 0px;

}
</style>
